<template>
  <div class="">
    <div v-if="!isFormOpen" class="bg-white weui-flex ta-c v-mdl" style="height: 50px;">
      <div class="weui-flex__item pd">
        <notify-btn v-if="lastAnswerId > 0" cls="ui btn empty ta-l c-gray"
          @hit="onComment"
          sty="border: 1px solid #00ADCE;padding: 8px 10px;border-radius: 5px;color: #ccc;">
          请输入
        </notify-btn>
        <notify-btn v-else cls="ui btn empty ta-l c-gray"
          sty="border: 1px solid #ddd;padding: 8px 10px;border-radius: 5px;color: #ccc;">
          请输入
        </notify-btn>
      </div>
      <div style="width: 60px;">
        <button class="ui btn empty" open-type="share" style="display:block;width: 100%;height: 100%;">
          <i class="if icon-share fs-1"></i>
          <div class="fs-6 c-gray pdt-s">分享</div>
        </button>
      </div>
      <div v-if="lastAnswerId > 0" style="width: 60px;">
        <form v-if="progress.liked" @submit="onUnstar" report-submit>
          <button class="ui btn empty" formType="submit" style="display:block;width: 100%;height: 100%;">
            <i class="if icon-favoed c-red fs-2"></i>
            <div class="fs-6 c-gray pdt-s">{{likeCount}}</div>
          </button>
        </form>
        <form v-else @submit="onStar" report-submit>
          <button class="ui btn empty" formType="submit" style="display:block;width: 100%;height: 100%;">
            <i class="if icon-favo fs-2"></i>
            <div class="fs-6 c-gray pdt-s">{{likeCount}}</div>
          </button>
        </form>
      </div>
      <div v-else style="width: 60px;">
        <button class="ui btn empty" style="display:block;width: 100%;height: 100%;">
          <i class="fi icon-heart disabled"></i>
          <div class="fs-xxs c-gray pdt-s">{{likeCount}}</div>
        </button>
      </div>
    </div>
    <div v-else class="bg-white weui-flex ta-c v-mdl">
      <div class="weui-flex__item">
        <notify-btn cls="ui btn primary no-rounder" @hit="onSubmit" :disabled="!isCreateAble" :loading="isLoading">
          提交
        </notify-btn>
      </div>
      <div style="width: 80px;" @tap.stop="removeFromOpenFormIds(pageProgressId)">
        <a>取消</a>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import NotifyBtn from '@/components/notify-btn'
export default {
  data() {
    return {
      likeCount: this.progress && this.progress.likeCount ? this.progress.likeCount : 0
    }
  },
  components: {
    NotifyBtn
  },
  computed: {
    ...mapGetters('progress', [
      'pageProgressId',
      'isCreateAble',
      'progress',
      'isNeedRedo',
      'isShowReplyForm',
      'openFormIds'
    ]),
    ...mapGetters('answer', ['lastAnswerId']),
    isFormOpen () {
      return this.openFormIds.indexOf(this.pageProgressId) >= 0
    }
  },
  methods: {
    ...mapActions('progress', [
      'star',
      'unstar',
      'updateIsShowReplyForm',
      'resetTextBlocks',
      'resetMediaBlocks',
      'setMediaBlocks',
      'setTextBlockValue',
      'getIsCreateAble',
      'setUploadQueues',
      'addToOpenFormIds',
      'removeFromOpenFormIds',
    ]),
    ...mapActions('comment', ['createForAnswer']),
    ...mapActions('notification', ['enqueue']),
    onStar(e) {
      this.star()
      this.likeCount++
      this.enqueue(e.target.formId)
    },
    onUnstar(e) {
      this.unstar()
      this.likeCount--
      this.enqueue(e.target.formId)
    },
    onComment() {
      this.addToOpenFormIds(this.pageProgressId)
    },
    async onSubmit() {
      if (!this.isCreateAble) return
      if (this.isLoading) return
      this.isLoading = true
      try {
        await this.createForAnswer({answerId: this.lastAnswerId, isNeedRedo: this.isNeedRedo})
        this.resetTextBlocks(this.pageProgressId)
        this.setTextBlockValue()
        this.setMediaBlocks({progressId: this.pageProgressId, blocks: []})
        this.setUploadQueues({progressId: this.pageProgressId, uploadQueue: []})
        this.getIsCreateAble()
        this.removeFromOpenFormIds(this.pageProgressId)
        this.isLoading = false
      } catch (e) {
        this.isLoading = false
        this.$debug({err: e})
      }
    }
  }
}
</script>

<style scoped lang="less">
@import "../../assets/less/var.less";

i {
  font-size: @fs-xl;
}
</style>
